<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <span class="searchName">名称：</span><input type="text">
    <span class="searchCity">城市：</span><input type="text">
    <button class="search">搜索</button>
  </div>
  
  <button id="c" class="btn btn-primary">增加</button>
  <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content" style="height: 231px;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">增加</h4>
        </div>
        <div class="modal-body">
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;ID：</span>
            <input id="cid" disabled type="text" />
          </div>
          <div>
            <span>名称：</span>
            <input id="cname" type="text" />
          </div>
          <div>
            <span>城市：</span>
            <input id="ccity" type="text" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="e" type="button" class="btn btn-default" data-dismiss="modal">
          关闭
        </button>
        <button id="d" type="button" class="btn btn-primary">
          确认增加
        </button>
      </div>
    </div>
  </div>
  </div>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">删除</h4>
        </div>
        <div class="modal-body">确认删除此条信息？</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button id="a" type="button" class="btn btn-primary">
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">修改</h4>
        </div>
        <div class="modal-body" style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            ">
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;ID：</span>
            <input id="id" disabled type="text" />
          </div>
          <div>
            <span>名称：</span>
            <input id="name" type="text" />
          </div>
          <div>
            <span>城市：</span>
            <input id="city" type="text" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button id="b" type="button" class="btn btn-primary">
            确认修改
          </button>
        </div>
      </div>
    </div>
  </div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>名称</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
    </tbody>
  </table>
  <div id="modalBox"></div>
  <script>
    const data = [
      { id: 1, name: "李四", city: "重庆" },
      { id: 2, name: "张三", city: "成都" },
    ];
    let index = 100;
    function createId() {
      return ++index;
    }
    //渲染函数
    function renderTable(data) {
      $("tbody").empty();
      for (let i = 0; i < data.length; ++i) {
        let item = data[i];
        $("tbody").append(`<tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button data-id="${item.id}" type="button" class="btn btn-danger">删除</button>
            <button data-id="${item.id}" type="button" class="btn btn-info">修改</button>
          </td>
        </tr>`);
      }
    }
    renderTable(data);
    //点击删除
    $("tbody").on("click", ".btn-danger", function (event) {
      $("#myModal").modal("show");
      const dataId = parseInt($(event.target).attr("data-id"));
      for (let i = 0; i < data.length; ++i) {
        let item = data[i];
        if (dataId === item.id) {
          data.splice(i, 1);
        }
      }
    });
    $("#a").on("click", () => {
      for (let i = 0; i < data.length; ++i) {
        let item = data;
        let id = data[i].id;
        if (item[i].index === id) {
          data.splice(i, 1);
        }
      }
      $("#myModal").modal("hide");
      renderTable(data);
    });
    //修改
    $("tbody").on("click", ".btn-info", function (event) {
      $("#myModal1").modal("show");
      const dataId = parseInt($(event.target).attr("data-id"));
      for (let i = 0; i < data.length; ++i) {
        let item = data[i];
        if (dataId === item.id) {
          $("#id").val(item.id);
          $("#name").val(item.name);
          $("#city").val(item.city);
        }
      }
    });
    $("#b").on("click", () => {
      let id = parseInt($("#id").val());
      let name = $("#name").val();
      let city = $("#city").val();
      for (let i = 0; i < data.length; ++i) {
        if (data[i].id == id) {
          data[i].id = id;
          data[i].name = name;
          data[i].city = city;
        }
      }
      $("#myModal1").modal("hide");
      renderTable(data);
    });
    $("#c").on("click", function () {
      $("#myModal3").modal("show");
      index += 1;
      $("#cid").val(index);
    });
    $("#d").on("click", function () {
      let cid = parseInt($("#cid").val());
      let cname = $("#cname").val();
      let ccity = $("#ccity").val();
      data.push({
        id: cid,
        name: cname,
        city: ccity,
      });
      $("#myModal3").modal("hide");
      renderTable(data);
    });
    $(".search").on("click",function(event){
      const dataId = parseInt($(event.target).attr("data-id"));
    })
  </script>
</body>

</html>